<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item to="/admin">首页</el-breadcrumb-item>
      <el-breadcrumb-item to="/admin/product/spu">商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品类别</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <!-- 标题区域 -->
    <el-row>
      <el-col>
        <el-button type="primary" style="float: right"
                   icon="el-icon-circle-plus-outline"
                    @click="openCategoryAddNewPage()">增加商品类别
        </el-button>
        <h3 style="line-height: 40px">
          <i  class="el-icon-s-tools"></i>  内容信息
        </h3>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col>
        <p style="border: 1px solid #bebdbd; background: #72bfc5; padding: 10px 12px;">
          <i class="el-icon-s-grid"></i> 商品类别列表
        </p>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <!-- 表格 -->
    <el-table
        :data="tableData"
        style="width: 100%"
        border>
      <el-table-column
          prop="id"
          label="编号"
          width="60"
          align="center">
      </el-table-column>
      <el-table-column
          prop="name"
          label="类别名称"
          width="150"
          align="center">
      </el-table-column>
      <el-table-column
          prop="depth"
          label="深度"
          width="60"
          align="center">
      </el-table-column>
      <el-table-column
          prop="sort"
          label="排序"
          width="60"
          align="center">
      </el-table-column>
      <el-table-column
          label="启用"
          width="120"
          align="center">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.enable"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
          width="120"
          align="center"
          label="显示在导航栏">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.display"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
          label="设置"
          width="120"
          align="center">
        <template slot-scope="scope">
          <el-button icon="el-icon-s-order" size="mini"
          :disabled="scope.row.parent!=0">查看子级</el-button>
        </template>
      </el-table-column>
      <el-table-column
          width="120"
          align="center"
          label="操作">
        <template slot-scope="scope">
          <el-button type="warning" icon="el-icon-edit"  size="mini" circle></el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" circle
                     @click="deleteById(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          "id": 12,
          "name": "111",
          "parentId": 0,
          "depth": 1,
          "sort":99,
          "parent":1,
          "enable": 0,
          "display": 0
        },
        {
          "id": 11,
          "name": "哈哈哈",
          "parentId": 0,
          "depth": 1,
          "sort":99,
          "parent":1,
          "enable": 1,
          "display": 0
        },
        {
          "id": 10,
          "name": "拍照手机",
          "parentId": 2,
          "depth": 2,
          "sort":99,
          "parent":1,
          "icon": "http://www.tedu.cn/logo.png",
          "enable": 1,
          "display": 1
        },
        {
          "id": 3,
          "name": "家居",
          "parentId": 0,
          "depth": 1,
          "sort":99,
          "parent":0,
          "icon": "http://www.tedu.cn/logo.png",
          "enable": 0,
          "display": 1
        },
        {
          "id": 7,
          "name": "洗衣机",
          "parentId": 1,
          "depth": 2,
          "sort":99,
          "parent":1,
          "icon": "http://www.tedu.cn/logo.png",
          "enable": 0,
          "display": 1
        },
        {
          "id": 5,
          "name": "电视",
          "parentId": 1,
          "depth": 2,
          "sort":99,
          "parent":0,
          "icon": "http://www.tedu.cn/logo.png",
          "enable": 0,
          "display": 1
        },
        {
          "id": 9,
          "name": "游戏手机",
          "parentId": 2,
          "depth": 2,
          "sort":99,
          "parent":1,
          "icon": "http://www.tedu.cn/logo.png",
          "enable": 1,
          "display": 1
        },
        {
          "id": 4,
          "name": "食品",
          "parentId": 0,
          "depth": 1,
          "sort":99,
          "parent":0,
          "icon": "http://www.tedu.cn/logo.png",
          "enable": 0,
          "display": 1
        },
        {
          "id": 8,
          "name": "教育电视",
          "parentId": 5,
          "depth": 3,
          "sort":99,
          "parent":1,
          "icon": "http://www.tedu.cn/logo.png",
          "enable": 1,
          "display": 1
        },
        {
          "id": 6,
          "name": "空调",
          "parentId": 1,
          "depth": 2,
          "sort":99,
          "parent":0,
          "icon": "http://www.tedu.cn/logo.png",
          "enable": 0,
          "display": 1
        },
        {
          "id": 2,
          "name": "手机",
          "parentId": 0,
          "depth": 1,
          "sort":99,
          "parent":1,
          "icon": "http://www.tedu.cn/logo.png",
          "enable": 1,
          "display": 1
        },
        {
          "id": 1,
          "name": "家用电器",
          "parentId": 0,
          "depth": 1,
          "sort":99,
          "parent":0,
          "icon": "http://www.tedu.cn/logo.png",
          "enable": 1,
          "display": 1
        }
      ]
    }
  },
  methods:{
    deleteById(id){
      this.$message('已删除id='+id+'的数据')
    },
    openCategoryAddNewPage(){
      this.$router.push('/admin/product/categories/add-new');
    },
    loadCategoryList(){
      alert("即将加载商品列表")
      let url = "http://localhost:8080//categories"
      console.log("请求路径:"+url);
      this.axios.get(url).then((response) =>{
        let jsonResult = response.data;
        console.log('服务器端响应的JsonResult：');
        console.log(jsonResult);
        this.tableData = jsonResult;
      }).catch(function (error){
        console.log(error);
      })

    }
  },
  mounted() {
    this.loadCategoryList();
  }
}
</script>

<style scoped>

</style>